<template>
    <div class="XB mainView">
        <!--<loading v-show="loading"></loading>-->
        <!--<el-row :gutter="20" class="XBWrap">-->
            <!--<el-col :span="8" class="XBList" v-for="(val,index) in myClass" :class="{enterCLS:isENTER==index}"-->
                    <!--@click="xuanban(val,index)">-->
                <!--<div class="medel"></div>-->
                <!--<div class="left">班</div>-->
                <!--<div class="right">-->
                    <!--<span class="banji">{{val.ClassName}}</span>-->
                    <!--<span class="kemu">{{USERINFO.SubjectName}}</span>-->
                    <!--<span class="renshu">人数：{{val.StudentCount}}人</span>-->
                <!--</div>-->
            <!--</el-col>-->
        <!--</el-row>-->
        <ul>
            <li v-for="(val,index) in myClass" :class="{enterCLS:isENTER==index}"
                @click="xuanban(val,index)">
                <div class="medel"></div>
                <div class="left">班</div>
                <div class="right">
                    <span class="banji">{{val.ClassName}}</span>
                    <span class="kemu">{{USERINFO.SubjectName}}</span>
                    <span class="renshu">人数：{{val.StudentCount}}人</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import store from '../store/'
    import {mapGetters, mapActions} from 'vuex'

    export default {
        name: "",
        computed: mapGetters([
            'USERINFO',
            'myClass',
            'enterClass',
            'isENTER',
            'loading',
            'enterClassID'
        ]),
        methods: {
            ...mapActions([
//                'xuanban'
            ]),
            xuanban(val, index){
                //     state.enterClassID = event.target.getAttribute('data-ID')
                //     state.enterClass = event.target.querySelector('.banji').innerHTML
                //     state.isENTER = event.target.getAttribute('data-index')
                store.state.mutations.enterClassID = val.ID
                store.state.mutations.enterClass = val.ClassName
                store.state.mutations.isENTER = index
            }
        },
        data () {
            return {}
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../assets/css/public.scss';

    .mainView {

    }

    .mainView::-webkit-scrollbar {
        width: 0px
    }

    .XB ul {
        width: 100%;
        overflow: hidden;
        li {
            cursor: pointer;
            width: 220px;
            height: 120px;
            margin: 0 15px 10px;
            box-shadow: $boxShadow;
            float: left;
            overflow: hidden;
            position: relative;
            div.left {
                float: left;
                width: 66px;
                height: 66px;
                line-height: 66px;
                background: rgb(0, 210, 255);
                border-radius: 50%;
                text-align: center;
                font-size: 32px;
                color: #fff;
                margin: 27px 17px;
            }
            div.right {
                float: left;
                width: 100px;
                height: 120px;
                span {
                    display: block;
                    text-align: center;
                    height: 34px;
                    line-height: 34px;
                }
                .banji {
                    font-size: 16px;
                }
                .kemu {
                    font-size: 26px;
                    font-weight: bold;
                }
                .renshu {
                    font-size: 16px;
                }
            }
        }
        li.enterCLS {
            background: url("../assets/images/gou.png") no-repeat right bottom;
            .medel {
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .05);
            }
        }
    }
</style>